<template>
  <div class="my-train">
    <div class="list">
      <div class="item" v-for="(item, index) in info" :key="index">
        <div class="left">
          <p class="title">余额充值</p>
          <p class="time">{{item.create_time | formatDate}}</p>
        </div>
        <div class="right">
          <p class="title">+{{item.money_add}}</p>
          <p class="time">获赠{{item.money_add}}元</p>
        </div>
      </div>
    </div>
    <div class="none" v-show="noDate">
      <img src="@/assets/kongzhuangtai.png" alt="">
      <p>暂无结果，赶快邀请好友吧</p>
    </div> 
  </div>
</template>

<script>
  import { getMoneyRecord } from '@/api/api';
  import { formatDate } from '@/util/date'
  export default {
    data () {
      return {
        noDate: false,
        info: [],
      }
    },
    filters: {
      formatDate(time) {
        if(!time){return;}
        let date = new Date(time*1000);
        return formatDate(date, 'yyyy.MM.dd hh:mm:ss');
      }
    },
    created () {
      this.get_money_record()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      get_money_record() {
        var uid = sessionStorage.getItem('uid');
        getMoneyRecord(uid).then((res) => {
          if(res.data.info.length == 0){
            this.noDate = true;
          }
          this.info = res.data.info
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.my-train
  background-color #f5f5f5
  min-height 100vh
  .list
    background-color #fff
    .item
      display flex
      height 7rem
      margin 0 1.6rem
      border-bottom 1px solid #e6e6e6
      &:last-child
        border none
      .title
        font-size 1.5rem
        color #333
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        line-height 2rem
        height 2rem
        margin-bottom .4rem
        margin-top 1.5rem
        width 25rem
      .time
        color #999
        font-size 1.2rem
        line-height 1.6rem
        height 1.6rem
      .left
        flex 3
      .right
        flex 1
        p
          width 100%
          text-align right
          margin-left 0
        .title
          color #FE9700
  .none
    img
      width 21.5rem
      position relative
      left 50%
      margin-left -10.75rem
      padding-top 11.6rem
    p
      color #999
      font-size 1.2rem
      text-align center
      margin-top 4rem
</style>
